import './css/index.css';
let input = document.querySelectorAll('label>input');
let checkAll = document.querySelector('.btn>button:first-of-type');
let noCheckAll = document.querySelector('.btn>button:nth-of-type(2)');
let checkToggle = document.querySelector('.btn>button:nth-of-type(3)');
let printResult = document.querySelector('.btn>button:last-of-type');

// 全选
checkAll.onclick = function () {
  for (let i = 0; i < input.length; i++) {
    input[i].checked = true;
  }
};

// 全不选
noCheckAll.onclick = function () {
  for (let i = 0; i < input.length; i++) {
    input[i].checked = false;
  }
};

// 反选
checkToggle.onclick = function () {
  for (let i = 0; i < input.length; i++) {
    if (input[i].checked == true) {
      input[i].checked = false;
    } else {
      input[i].checked = true;
    }
  }
};

// 打印
printResult.onclick = function () {
  let arr = [];
  for (let i = 0; i < input.length; i++) {
    if (input[i].checked) arr.push(input[i].value);
  }
  console.log('arr', arr);
};
let cityUl = document.querySelector('ul');
let cityLi = document.querySelectorAll('ul>li');
let createNode = document.querySelector('.btn2>button');
let insertNode = document.querySelector('.btn3>button');
let replaceNode = document.querySelector('.btn4>button');
let readNode = document.querySelector('.btn5>button');
let readBeijingNode = document.querySelector('.btn6>button');

// 创建节点
createNode.onclick = function () {
  let guangZhou = document.createElement('li');
  guangZhou.append(document.createTextNode('广州'));
  cityUl.append(guangZhou);
};

// 插入节点
insertNode.onclick = function () {
  let guangZhou = document.createElement('li');
  guangZhou.append(document.createTextNode('广州'));
  for (let i = 0; i < cityLi.length; i++) {
    if (cityLi[i].innerText == '北京') {
      cityUl.insertBefore(guangZhou, cityLi[i]);
    }
  }
};

// 替换节点
replaceNode.onclick = function () {
  let guangZhou = document.createElement('li');
  guangZhou.append(document.createTextNode('广州'));
  for (let i = 0; i < cityLi.length; i++) {
    if (cityLi[i].innerText == '北京') {
      cityUl.replaceChild(guangZhou, cityLi[i]);
    }
  }
};

// 读取当前城市结构
readNode.onclick = function () {
  let newUl = document.querySelector('ul');
  console.log('当前城市列表结构为:', newUl);
};

// 读取北京内的节点
readBeijingNode.onclick = function () {
  let cityLi = document.querySelectorAll('ul>li');
  for (let i = 0; i < cityLi.length; i++) {
    if (cityLi[i].innerText == '北京') {
      console.log('背景内的节点:', cityLi[i]);
    }
  }
};
